<template>
	<view>
		<jp-signature-popup v-if="signType == 2" v-model="electronicSignature" @input="signInput" />
		<image class="signImg" v-if="electronicSignature" :src="electronicSignature" mode=""></image>
		<u-button v-if="!signType && !electronicSignature" type="primary" :plain="true" text="签名" @click="clickSign"></u-button>
		<!-- 签名选择 -->
		<u-action-sheet :actions="list" title="选择签名方式" :show="show" @select="selectList" @close="actionClose" closeOnClickOverlay></u-action-sheet>
	</view>
</template>

<script>
	export default {
		model:{
			prop: 'value', // 此处的value为父组件v-model绑定数据
			event: 'input' // 派发事件，事件名只能是input，否则无法生效
		},
		props:{
			value:''
		},
		watch:{
			// value(val){
			// 	this.electronicSignature = val;
			// }
			value: {
			    handler(newVal, oldVal) {
			      console.log(newVal, oldVal);
				  this.electronicSignature = newVal;
			    },
			    // 开启深度监听
			    deep: true,
				immediate:true
			}
		},
		data() {
			return {
				signType:'',
				show:false,
				list: [
					{
						name:'使用签名图片',
						type:'1',
					},
					{
						name: '手动签名',
						type:'2',
					},
				],
				electronicSignature:'',
			};
		},
		methods:{
			// 点击签名
			clickSign(){
				this.show = true;
			},
			// 关闭签名选择
			actionClose(){
				this.show = false;
			},
			selectList(data){
				this.signType = data.type;
				if(data.type == 1){
					// 签名图片
					this.$emit('input',this.$store.state.user.oaUser.electronicSignature)
				}
			},
			// 签名插件
			signInput(val){
				this.$emit('input',val)
			}
		}
	}
</script>

<style lang="less" scoped>
.signImg{
	width: 100%;
	height: 80rpx;
}
</style>
